<template>
  <div class="dashboard-container">
    <el-card>
      <div class="app-container">
        <el-tabs v-model="activeName">
          <el-tab-pane label="角色管理" name="first">
            <el-row>
              <el-button type="primary" @click="showDialog('',false)">新增角色</el-button>
            </el-row>
            <!-- 角色表单-->
            <el-table :data="tableData" style="width: 100%">
              <el-table-column type="index" label="序号" width="120"></el-table-column>
              <el-table-column prop="name" label="角色名称" width="240"></el-table-column>
              <el-table-column prop="description" label="描述"></el-table-column>
              <el-table-column label="操作">
                <div slot-scope="scope">
                  <el-button type="success" @click="showAssignPermisson(scope.row)">分配权限</el-button>
                  <el-button type="primary" @click="showDialog(scope.row,true)">编辑</el-button>
                  <el-button type="danger" @click="deleteHandle(scope.row)">删除</el-button>
                </div>
              </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="query.page"
              :page-sizes="[2,5,10,15]"
              :page-size="query.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </el-tab-pane>
          <!-- 分配角色弹出层 -->
          <el-dialog title="分配角色" :visible.sync="assignVisible" show-checkbox width="50%">
            <el-tree
              ref="tree"
              node-key="id"
              :data="data"
              :props="defaultProps"
              :show-checkbox="true"
              :check-strictly="true"
            ></el-tree>

            <span slot="footer" class="dialog-footer">
              <el-button @click="assignVisible = false">取 消</el-button>
              <el-button type="primary" @click="okBtn()">确 定</el-button>
            </span>
          </el-dialog>
          <!-- 编辑角色弹出层 -->
          <el-dialog
            :title="isEdit?'编辑角色':'新增角色'"
            @close="close"
            :visible.sync="dialogVisible"
            width="50%"
          >
            <!-- 编辑表单 -->
            <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px">
              <el-form-item label="角色名称" prop="name">
                <el-input v-model="editForm.name"></el-input>
              </el-form-item>
              <el-form-item label="角色描述">
                <el-input v-model="editForm.description"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="putForm">确 定</el-button>
            </span>
          </el-dialog>
          <!-- 公司信息 -->
          <el-tab-pane label="公司信息" name="second">
            <el-alert
              title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
              type="info"
              :closable="false"
            ></el-alert>
            <!-- 公司表单 -->
            <el-form ref="form" label-width="120px" style="margin-top:50px" v-model="form">
              <el-form-item label="公司名称">
                <el-input disabled style="width:400px" v-model="form.name"/>
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input disabled style="width:400px" v-model="form.companyAddress "/>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input disabled style="width:400px" v-model="form.mailbox"/>
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                  v-model="form.remarks"
                  type="textarea"
                  :rows="3"
                  disabled
                  style="width:400px"
                />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  getRole,
  deleteRole,
  uploadRole,
  getRoleDetail,
  addRole
} from "@/api/employees";
import { getCompanyInfo } from "@/api/setting";
import { getPermissionList, assignPermisson } from "@/api/permisson";
import { tranListToTreeData } from "@/utils";
export default {
  data() {
    return {
      activeName: "first",
      tableData: [],
      query: {
        page: 1,
        pagesize: 10
      },
      total: null,
      form: {},
      dialogVisible: false,
      isEdit: true,
      editForm: {},
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" }
        ]
      },
      assignVisible: false,
      defaultProps: {
        children: "children",
        label: "name"
      },
      data: [],
      assignPermissonId: null
    };
  },
  created() {
    this.getRole();
    this.getCompanyInfo();
  },
  methods: {
    // 得到公司信息
    async getCompanyInfo() {
      const data = await getCompanyInfo(this.$store.getters.companyId);
      this.form.name = data.name;
      this.form.companyAddress = data.companyAddress;
      this.form.mailbox = data.mailbox;
      this.form.remarks = data.remarks;
      console.log(data);
    },
    async getRole() {
      const data = await getRole(this.query);
      this.tableData = data.rows;
      this.total = data.total;
    },
    handleSizeChange(e) {
      this.query.pagesize = e;
      this.getRole();
    },
    handleCurrentChange(e) {
      this.query.page = e;
      this.getRole();
    },
    close() {
      this.$refs.editForm.clearValidate();
      this.editForm = {};
    },
    // 删除操作
    deleteHandle(e) {
      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await deleteRole(e.id);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
          this.getRole();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 展示弹出层
    async showDialog(e, isEdit) {
      console.log(e);
      this.isEdit = isEdit;
      this.dialogVisible = true;
      if (isEdit === true) {
        this.editForm = await getRoleDetail(e.id);
      }
    },
    putForm() {
      this.$refs.editForm.validate(async valid => {
        if (valid) {
          try {
            if (this.isEdit === true) {
              await uploadRole(this.editForm);
            } else {
              await addRole(this.editForm);
            }
            this.getRole();
            this.dialogVisible = false;
            this.$message.success("操作成功");
          } catch (err) {}
        } else {
          return false;
        }
      });
    },
    // 分配权限
    async showAssignPermisson(row) {
      this.assignVisible = true;
      console.log(await getPermissionList());
      this.data = tranListToTreeData(await getPermissionList(), "0");
      this.assignPermissonId = row.id;
    },
    async okBtn() {
      await assignPermisson({
        id: this.assignPermissonId,
        permIds: this.$refs.tree.getCheckedKeys()
      });
      this.assignVisible = false;
      this.$message.success("操作成功");
    }
  },
  computed: {}
};
</script>

<style>
</style>
